<template>
  <view>
    <u-sticky offset-top="1">
      <u-tabs
        :list="stolist"
        :current="current"
        @click="selectStatues"
      ></u-tabs>
    </u-sticky>

    <view class="search">
      <u-search
        class="left"
        placeholder="请输入商品分类名称"
        @change="selectbrank"
        :bgColor="searchstyle"
        :borderColor="borderstyle"
        :showAction="false"
        v-model="keyword"
      ></u-search>
      <view class="backtop">
        <u-button
          type="primary"
          @click="topback"
          class="custom-style"
          :plain="true"
          size="mini"
          text="刷新"
        ></u-button>
      </view>
    </view>

    <u-loading-icon :show="loadshow" :duration="3000" text="加载中" />

    <view v-if="empty == 'isempty'" class="empty">
      <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </view>
    <view class="section">
      <u-list
        :scrollTop="30"
        height="670"
        :style="height"
        :enableBackToTop="true"
        v-if="empty == 'notempty'"
        :preLoadScreen="page * 5"
        @scrolltolower="scrolltolower"
        :pagingEnabled="true"
      >
        <u-list-item v-for="item in prolist" :key="item.id">
          <u-swipe-action>
            <u-swipe-action-item
              @click="action"
              :name="item.id"
              :options="options"
            >
              <view class="card" @click="toEdit(item.id)">
                <view class="badge">
                  <!-- <u-badge :type="'warning'" max="99" :value="item.branktotal_text"></u-badge> -->
                </view>
                <view class="left">
                  <view class="img">
                    <u-image
                      :src="item.thumb_text"
                      width="100px"
                      height="100px"
                    >
                      <template v-slot:loading>
                        <u-loading-icon color="red"></u-loading-icon>
                      </template>
                    </u-image>
                  </view>
                </view>
                <view class="right">
                  <view class="text">
                    <h4>{{ item.name }}</h4>
                  </view>

                  <view class="text">
                    <span>创建时间:</span>
                    <span>{{ item.createtime_text }}</span>
                  </view>
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </u-list-item>

        <u-loadmore
          :status="status"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
        />
      </u-list>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>

    <!-- 模态框 -->
    <u-modal
      :show="show"
      :content="content"
      showCancelButton
      @confirm="confirm"
      @cancel="cancel"
    />


  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.auth = this.$u.auth.check();

  

    this.getstorelist();
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      type: "warning",
      value: 99999,
      current: 0,
      xzstoid: "",
      status: "loading",
      loadingText: "努力加载中",
      loadmoreText: "下拉加载更多",
      nomoreText: "没有更多数据了",
      padding: "150rpx 0rpx",
      newptype:"",
      options: [
        {
          text: "修改",
          style: {
            backgroundColor: "#3c9cff",
          },
        },
        {
          text: "销毁",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
      ],
      content: "是否销毁该商品分类",
      stolist: [],
      xzstoid: 1,
      auth: {},
      page: 1,
      ptype: "",
      empty: "",
      keyword: "",
      searchstyle: "#ffffff",
      borderstyle: "#eee",
      prolist: [],
      ptypeid: 0,
      loadshow: false,
      show: false,

      branklist: [],
    };
  },
  methods: {

    

     selectStatues(e) {
      this.prolist = [];
      this.current = e.index;
      this.page = 1;
      this.keyword = "";
      // this.ptype = e.ptype;
      uni.setStorageSync('newptype',e.ptype);

      this.xzstoid = e.id;
      this.ptype = e.ptype
      this.list();
    },

    async getstorelist() {
      let data = {
        adminid: this.auth.id,
        stoid: this.auth.stoid,
      };
      let result = await this.$u.api.product.protypestore(data);

      if (result.code) {

        
        this.stolist = result.data;
    

         uni.setStorageSync('newptype', this.stolist[0]["ptype"]);


         


        this.list();
      }
    },
    action(item) {
      // 添加
      if (item.index == 0) {
        uni.$u.route({
          url: "/pagesC/product/goodstype/edit",
          params: {
            ptypeid: item.name,
          },
        });
      }
      // 销毁
      if (item.index == 1) {
        this.show = true;
        this.ptypeid = item.name;
      }
    },
    async confirm() {
      this.show = false;

      var data = {
        ptypeid: this.ptypeid,
        adminid: this.auth.id,
        xzstoid: this.xzstoid,
      };

      var result = await this.$u.api.product.destroygoodstype(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1200,
          complete: () => {
            uni.reLaunch({
              url: "/pagesC/product/goodstype/index",
            });
          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
    cancel() {
      this.show = false;
    },

    selectbrank(e) {
      this.page = 1;

      this.prolist = [];
      // 直接赋值
      this.keyword = e;
      // 然后调用
      this.list();
    },

    async list() {
      // 最高管理员需传输的数据
      let data = {
        adminid: this.auth.id,
        page: this.page,
        ptype: this.ptype == "" ? uni.getStorageSync("newptype") : this.ptype,
        keyword: this.keyword,
      };
      var result = await this.$u.api.product.typedata(data);

      if (result.code) {
        if (Array.isArray(result.data) && result.data.length > 0) {
          this.empty = "notempty";

          this.prolist = this.prolist.concat(result.data);
          this.page++;
        } else {
          this.status = "nomore";
          // this.empty = "isempty"
        }
      }
    },

    toEdit(ptypeid) {
  
      uni.$u.route({
          url: "/pagesB/shop/bags/index",
          params: {
            ptypeid: ptypeid,
            xzstoid:this.xzstoid
          },
        });
    },
    addproducttype() {
      uni.$u.route({
        url: "/pagesC/product/goodstype/add",
        params: {
          xzstoid: this.xzstoid,
          current: this.current,
        },
      });
    },
    scrolltolower() {
      this.list();
    },

     topback() {
      
      uni.reLaunch({
        url: "/pagesB/shop/index",
      })
    },
  },

};
</script>

<style scoped lang="scss">
.section {
  margin: 55px 0px;
  overflow: auto;
}

.backtop {
  width: 20px;
  color: "blue";
  margin-left: 15px;
}

.empty {
  margin-top: 50px;
}

.search {
  width: 70%;
  position: fixed;
  top: 7%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 9%;
  z-index: 999;
}
.btnstyle {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.card {
  display: flex;
  position: relative;
  width: 92%;
  height: 135px;
  margin: 0 auto;
  border-radius: 2%;
  border: 1px solid #eee;
  margin-top: 20px;
  box-shadow: 2px 2px 2px #eee, 2px 2px 2px #eee;

  .left {
    .img {
      padding: 22px;
    }
  }

  .right {
    width: 62%;
    margin-top: 30px;

    .text {
      padding-top: 10px;
      h4 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }

      span {
        font-size: 12px;
        color: #888;
      }

      span:nth-of-type(2) {
        padding-left: 10px;
      }
    }
  }
}

.content {
  background: #ffffff;
}

.badge {
  position: absolute;
  right: 35px;
  top: 20px;
}
</style>
